<template>
  <div style="width: 100%;background: #F5F5F5;">
    <!--{{data1}}<hr/>-->
    <!--{{data2}}<hr/>-->
    <!--{{ftitle}}-->
    <div id="body1">
      <el-row style="width: 80%;margin-left: 10%">
        <!--导航栏-->
        <el-col :span="4"><div class="grid-content bg-purple tree"style="height: 350px;width: 350px">
          <div style="position: relative;z-index: 3" @mouseleave="hide">
              <ul class="treeul">
                <li v-for='(data,index) in data1' id="treeli" style="width: 190px" @mouseover="show">
                 <el-link :underline="false" class="links"> <span style="display:none;">{{index}}</span>
                   <router-link :to="{path:'/Course',query: {title:data.title,fid:data.id,index:index}}" class="links">{{data.title}}</router-link>
                 </el-link><span class="spanmenu"> › </span>
                </li>
              </ul>
              <div style="float: left;height: 366px;width:150px;display:none;z-index: 3" ref="div1">
                <ul id="onesonul" class="sonul">
                  <li v-for='data in data2'>
                    <router-link :to="{path:'/Course',query: {ctitle:data.title,title:ftitle,index:index,id:data.id,parentId:data.parentId}}"><el-link  :underline="false" class="links2">{{data.title}}</el-link></router-link>
                  </li>
                </ul>
              </div>
            </div>
        </div></el-col>
        <!--轮播图-->
        <!--<el-col :span="20"><div class="grid-content bg-purple-light">
          <div class="block" >
            <el-carousel :interval="10000" height="350px" arrow="never" >
              <el-carousel-item v-for="(item,index) in imgList" :key="index" >
                <a href="#" ><img v-bind:src="item.imgurl" height="400px" width="100%"/></a>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div></el-col>-->
        <el-col :span="20"><div class="grid-content bg-purple-light">
          <div class="block" >
            <el-carousel :interval="10000" height="350px" arrow="never" >
              <el-carousel-item v-for="item  in imgList" :key="item.id" >
                <!--<router-link :to="{path:'/outline',query:{}}">&lt;!&ndash;{path:'/login',query:{name:'first'}}&ndash;&gt;-->
                  <img v-bind:src="item.advImg" @click="skip(item.advTarget)" height="400px" width="100%"/>
                <!--</router-link>-->
              </el-carousel-item>
            </el-carousel>
          </div>
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Body1",
    created(){
      this.getImgList();
      this.getSubject();
    },
        methods:{
          show(val){

            let index = val.currentTarget.firstElementChild.firstElementChild.firstElementChild.innerHTML;
            this.data2 = this.data1[index].children;
            this.ftitle = this.data1[index].title;
            this.index = index;
            //alert(JSON.stringify(this.data2))
            this.$refs.div1.style.display = "block";
          },
          hide(){
            this.$refs.div1.style.display = "none";
          },getImgList(){
            this.$axios2.get("homepage/adv/findByStatusId").then(r=>{
              //alert(JSON.stringify(r.data))
              this.imgList=r.data;
            })
          },skip(cid){
            //通过课程id查询相应课程
            this.$axios2.get("showdata/eduCourse/findByCid?cid="+cid).then(r=>{
              this.dat=r.data
              //alert(JSON.stringify(r.data)+"===")
              this.$router.push({
                path:'/outline',
                query:{
                  all:JSON.stringify(this.dat)
                }
              })

            })


          }
          ,getSubject(){
            this.$axios2.post("showdata/eduSubject/findAll").then(r=>{
              //alert(JSON.stringify(r.data))
              this.data1=r.data;
            })
          }
        },
        data() {
        return {
          isCollapse: true,
          imgList:[
            {imgurl:require('../../assets/img/h1.jpg')},
            {imgurl:require('../../assets/img/h2.jpg')},
            {imgurl:require('../../assets/img/h3.jpg')},
            {imgurl:require('../../assets/img/h4.jpg')}
          ],dat:{},
          data1:[
            // {pname:"后台开发",cname:["系统架构","项目实战","单点突破"]},
            // {pname:"云计算/大数据",cname:["机器学习","人工智能","Spark","爬虫","Python","云计算","大数据","区块链","Go语言"]},
            // {pname:"数据存储",cname:["MySQL","Redis","FastDFS"]},
            // {pname:"运维/测试",cname:["运维","测试",]},
            // {pname:"产品/运营",cname:["产品",]},
            // {pname:"网络考试/认证"},
            // {pname:"开源项目",cname:["后台管理系统","龙果支付系统"]},
          ],data2:[],
          ftitle:'',
          index:'',
        };
      },
    }
</script>

<style scoped>
  a {
    text-decoration: none;
  }
  #body1{
    height: 400px;
    padding:10px 0;margin: 0 auto;width: 1500px
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .treeul{
    height: 350px;
    width: 200px;
    line-height:20px;
    background-color: #444649;
    border-radius: 10px 0 0 10px;
    padding:0;
    margin: auto;
    float: left;
  }
  .treeul li{
    list-style:none;
    line-height: 50px;
    height: 50px;
    color: #CCCCCC;
    padding-left:10%;
    text-align: left;
  }
  .spanmenu{
    float: right;
    margin-right: 15%;
  }
  .sonul{
    height: 350px;
    width: 140px;
    background-color: white;
    padding-left:20%;
    margin: auto;
    float: left;
  }
  .sonul li{
    list-style:none;
    margin-bottom: 10%;
    margin-top: 10%;
    color: black;
  }
  #treeli:hover{
    background-color:#F5F5F5;
    color:red;
  }
  #treeli:hover .links{
    color: red;
  }
  #treeli:hover{
    display: block;
  }
  .fdiv:hover .div1{
    display: block;
  }

  .links{
    font-size: 15px;
    color: #CCCCCC;
  }
  .links2{
    font-size: 15px;
    color:black;
    font-weight: bolder;
  }
  .links:hover ,.links2:hover{
    color:red;
  }
  #treeli:first-child:hover {
    border-radius: 10px 0 0 0px;
  }
  #treeli:last-child:hover {
    border-radius: 0px 0 0 10px;
  }
</style>
